import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'
import Index from '../views/Index'
import Menu from "../views/sys/Menu"
import Role from "../views/sys/Role"
import User from "../views/sys/User"
import UserCenter from "../views/UserCenter";
import axios from "axios";
import store from "../store/index"
import Dict from "../views/sys/Dict";

// 注册组件
Vue.use(Router)

// 创建存放路由的数组
const routes = [
    {
        path: '/',
        name: 'Home',
        // 预先加载模式
        component: Home,
        children: [
            {
                path: '/index',
                name: 'Index',
                component: Index
            },
            {
                path: '/sys/userCenter',
                name: 'UserCenter',
                component: UserCenter
            },
            {
                path: '/sys/users',
                name: 'SysUser',
                component: User
            },
            {
                path: '/sys/roles',
                name: 'SysRole',
                component: Role
            },
            {
                path: '/sys/menus',
                name: 'SysMenu',
                component: Menu
            },
            {
                path: '/sys/dicts',
                name: 'SysDict',
                component: Dict
            }
        ]
    },
    {
        path: '/login',
        name: 'Login',
        // 懒加载模式
        component: () => import('../views/Login')
    }
]

// 创建VueRouter的实例化对象，同时还要配置一些参数
const router = new Router({
    // 设置我们的路由模式为history模式
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

router.beforeEach((to, from, next) => {
    let hasRoute = store.state.menu.hasRoute;
    if (!hasRoute) {
        axios.get('/sys/menu/nav', {
            headers: {
                Authorization: localStorage.getItem('token')
            }
        }).then(res => {
            // 拿到menuList
            store.commit("setMenu", res.data.data.nav)
            // 拿到用户权限
            store.commit("setAuthorities", res.data.data.authorities)
            console.log(store.state.menu.menuList)
            // 动态绑定路由
            let newRoutes = router.options.routes
            res.data.data.nav.forEach(menu => {
                if (menu.children) {
                    menu.children.forEach(child => {
                        // 转换成路由
                        let route = menuToRoute(child);
                        // 把路由添加到路由管理中
                        if (route) {
                            newRoutes[0].children.push(route)
                        }
                    })
                }
            })
            router.addRoutes(newRoutes)
            hasRoute = true
            store.commit("changeRouteStatus", hasRoute)
        })
    }
    next()
})

// 导航转成路由
const menuToRoute = (menu) => {
    if (!menu.component) {
        return null;
    }
    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            icon: menu.icon,
            title: menu.title
        }
    }
    route.component = () => import('../views/' + menu.component + '.vue')
    return route
}

// 导出router
export default router
